<template>
  <div class="wfull">
    <a-form :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
      <a-form-item label="名称" required>
        <ZgInput v-model="name"></ZgInput>
      </a-form-item>
      <a-form-item label="编码" required>
        <ZgInput v-model="code"></ZgInput>
      </a-form-item>
      <a-form-item label="类型" required>
        <ZgSelect v-model="type" :options="typeArr"></ZgSelect>
      </a-form-item>
      <a-form-item label="值" required>
        <ZgInput v-show="type==='1'" v-model="content"></ZgInput>
        <ZgSwitch v-show="type==='2'" v-model="bool" :width="120" :text="['开启','关闭']"></ZgSwitch>
        <ZgUpImg v-show="type==='3'" v-model="image"></ZgUpImg>
        <div v-show="type==='4'">
          <div class="flx-s" v-if="pdf.length>0">
            <a-tag>{{ pdf }}</a-tag>
            <a class="cpt ml10" @click="pdf=''">删除</a>
          </div>
          <ZgUpFile v-else accept=".pdf" @change="onUpload"></ZgUpFile>
        </div>
        <ZgMap v-show="type==='5'" v-model="map"></ZgMap>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { typeArr } from './type'
export default {
  data () {
    return {
      typeArr,
      name: '',
      code: '',
      type: '1',
      content: '',
      bool: false,
      image: '',
      map: [],
      pdf: ''
    }
  },
  methods: {
    validateMap () {
      if (this.map.length === 0) {
        return false
      }
      return !this.map.some(t => {
        return t.key.length === 0 || t.value.length === 0
      })
    },
    onUpload (v) {
      if (v && v.length > 0) {
        this.pdf = v[0].path
      }
    },
    save () {
      if (this.name.length === 0) {
        return this.$result.error('请输入配置名称')
      }
      if (this.code.length === 0) {
        return this.$result.error('请输入配置编码')
      }
      if (this.type.length === 0) {
        return this.$result.error('请选择配置类型')
      }
      if (this.type === '1' && this.content.length === 0) {
        return this.$result.error('请输入文本内容')
      }
      if (this.type === '3' && this.image.length === 0) {
        return this.$result.error('请上传图片')
      }
      if (this.type === '4' && this.pdf.length === 0) {
        return this.$result.error('请上传PDF')
      }
      if (this.type === '5' && !this.validateMap()) {
        return this.$result.error('请输入完整的键值对内容')
      }

      return this.$result.ok({
        name: this.name,
        code: this.code,
        type: this.type,
        content: this.type === '1'
          ? this.content
          : this.type === '2'
            ? `${this.bool}`
            : this.type === '3'
              ? this.image
              : this.type === '4'
                ? this.pdf
                : this.type === '5'
                  ? JSON.stringify(this.map)
                  : ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
